<script setup lang="ts">
import { useSiteInfoStore } from '@/store/modules/earlyWarning/useSiteInfoStore';

const { siteInfos, siteInfoDialog } = storeToRefs(useSiteInfoStore());
</script>

<template>
  <el-dialog v-model="siteInfoDialog" :modal="false" :draggable="true" width="50%" append-to-body class="largeScreen-dialog">
    <div class="site-table">
      <el-table
        :data="siteInfos"
        max-height="300"
        style="width: 100%; font-size: 16px"
        :row-style="{ height: '50px' }"
        :cell-style="{ padding: '0px' }"
        ref="scrollTable"
      >
        <el-table-column prop="name" label="名称" min-width="200" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="code" label="编码" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="typeName" label="类型" min-width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="inPressure" label="进站压力(MPa)" min-width="140" show-overflow-tooltip></el-table-column>
        <el-table-column prop="outPressure" label="出站压力(MPa)" min-width="140" show-overflow-tooltip></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.site-table {
  :deep(.el-table) {
    --el-table-border-color: #004e70;
    --el-table-header-bg-color: transparent;
    --el-table-row-hover-bg-color: transparent;
    --el-table-text-color: #fff;
    --el-table-header-text-color: #00ffff;
    --el-table-border: none;

    background-color: transparent;

    /* 全局样式中 */
    .el-table__header-wrapper th {
      background: linear-gradient(180deg, #004db9 0%, #01347b 48%, #014cb5 100%);
      color: #0ff;
    }

    .el-table__body {
      tr {
        background-color: #083577;
        color: #fff;

        td {
          border-bottom: 1px solid #0a73a0;
          cursor: pointer;
        }
      }
    }

    .el-table__empty-block {
      background-color: #003556;

      .el-table__empty-text {
        color: #00ffff;
        font-size: 24px;
      }
    }

    /* Scrollbar styles */
    .el-table__body-wrapper {
      &::-webkit-scrollbar {
        width: 0.5rem;
        height: 0.5rem;
        background-color: #3f8af3;
        border-radius: 0.375rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: #1c4682;
        border-radius: 0.375rem;
      }
    }
  }
}
</style>
